<!doctype html>
<html ng-app="wish">
<head>
    <meta charset="utf-8">

    <title>angular案例--许愿墙</title>
    <link rel="stylesheet" href="./Css/index.css"/>
    <script src="../js/angular.js"></script>
    <script src="../js/jquery-1.7.2.js"></script>
    <script>
        angular.module('wish', [])
            .filter('to5', function () { //AngularJS的filter，中文名“过滤器”是用来过滤变量的值，或者格式化输出，得到自己所期望的结果或格式的东东。 和Directive一样，如果内建的Filter不能满足你的需求，可以自定义Filter
                return function (input) {
                    input += '';
                    while (input.length < 5) {
                        input = '0' + input;
                    }

                    return input;
                };
            })
            .filter('t2d', function () {
                return function (input) {
                    var oDate = new Date();
                    oDate.setTime(input * 1000);

                    return oDate.getHours() + ':' + oDate.getMinutes() + ':' + oDate.getSeconds();
                };
            })
            .directive('rndPos', function () {
                return function (scope, element, attr) {
                    element.css({
                        left: parseInt(Math.random() * 600 + 100) + 'px',
                        top: parseInt(Math.random() * 300 + 50) + 'px'
                    });
                };
            })
            .directive('drag', function () {
                return function (scope, element, attr) {
                    element.bind('mousedown', function (ev) {
                        var disX = ev.clientX - element[0].offsetLeft;
                        var disY = ev.clientY - element[0].offsetTop;
                        $(document).bind('mousemove', function (ev) {
                            var x = ev.clientX - disX;
                            var y = ev.clientY - disY;
                            element.css({
                                'left': x + 'px',
                                'top': y + 'px'
                            });
                            localStorage['pos_' + element[0].dataset['znsId']] = x + '|' + y;
                        });
                        $(document).mouseup(function () {
                            $(document).unbind('mousemove');
                            $(document).unbind('mouseup');
                        });
                    });
                };
            })
            .directive('center', function () {
                return function (scope, element, attr) {
                    element.css({
                        'left': '50%',
                        'top': '50%',
                        'marginLeft': -element[0].offsetWidth / 2 + 'px',
                        'marginTop': -element[0].offsetHeight / 2 + 'px'
                    });
                };
            })
            .controller('mainController', function ($scope, $http) {
                $scope.data = [];
                $scope.showform = true;
                $scope.remove = function (id, index) {
                    $scope.data.splice(index, 1);

                };

                $scope.add = function () {
                    var x = parseInt(Math.random() * 600 + 100);
                    var y = parseInt(Math.random() * 300 + 50);
                    $scope.data.push({
                        id: $scope.data.length + 1,
                        username: $scope.add_username,
                        content: $scope.add_content,
                        time: new Date().getTime() / 1000,
                        x: x,
                        y: y
                    });

                    localStorage['pos_' + data.id] = x + '|' + y;
                    $scope.showform = false;
                };

                if ($scope.data.length !== 0) {
                    $scope.showform = false;
                }
                $scope.add_content = '';


                $scope.alert = function (str) {
                    alert(str);
                };
                $scope.addFace = function (alt) {
                    $scope.add_content += '[' + alt + ']';
                };

                $scope.arrFace = [
                    {src: 'zhuakuang', alt: '抓狂'},
                    {src: 'baobao', alt: '抱抱'},
                    {src: 'haixiu', alt: '害羞'},
                    {src: 'ku', alt: '酷'},
                    {src: 'xixi', alt: '嘻嘻'}
                ];
            });

    </script>
</head>

<body ng-controller="mainController">
<div id='top'>
    <span id='send' ng-click="showform=true"></span>
</div>
<div id='main'>
    <dl class='paper'
        ng-class="{a1: item.id%5==0, a2: item.id%5==1, a3: item.id%5==2, a4: item.id%5==3, a5: item.id%5==4}"
        ng-repeat="item in data" style="left:{{item.x}}px; top:{{item.y}}px;" drag data-zns-id="{{item.id}}">
        <dt>
            <span class='username'>{{item.username}}</span>
            <span class='num'>No.{{item.id|to5}}</span>
        </dt>
        <dd class='content'>{{item.content}}</dd>
        <dd class='bottom'>
            <span class='time'>{{item.time|t2d}}</span>
            <a href="" class="close" ng-click="remove(item.id, $index)"></a>
        </dd>
    </dl>
</div>

<div id='send-form' ng-show="showform" center>
    <p class='title'><span>许下你的愿望</span><a href="" id='close' ng-click="showform=false"></a></p>
    <form action="" name='wish'>
        <p>
            <label for="username">昵称：</label>
            <input type="text" name='username' ng-model="add_username"/>
        </p>
        <p>
            <label for="content">愿望：(您还可以输入&nbsp;<span id='font-num'>50</span>&nbsp;个字)</label>
            <textarea name="content" ng-model="add_content"></textarea>
        <div id='phiz'>
            <img ng-repeat="face in arrFace" ng-src="./Images/phiz/{{face.src}}.gif" alt="{{face.alt}}"
                 ng-click="addFace(face.alt)"/>
        </div>
        </p>
        <span id='send-btn' ng-click="add()"></span>
    </form>
</div>
<!--[if IE 6]>
<script type="text/javascript" src="./Js/iepng.js"></script>
<script type="text/javascript">
    DD_belatedPNG.fix('#send,#close,.close', 'background');
</script>
<![endif]-->
</body>
</html>